<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="../common/bootstrap_knockout.jsp"></jsp:include>
<title>button exercise</title>
</head>
<body>
 <br>
 <!-- 一个只带有内边距和水平分割的基本表 -->
 <table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
	    <th>名称</th>
		<th>城市</th>
	  </tr>
   </thead>
   <tbody>
     <tr>
	   <td>Tanmay</td>
       <td>Bangalore</td>
	 </tr>
	 <tr>
	   <td>Sachin</td>
       <td>Mumbai</td>
	 </tr>
   </tbody>
 </table>

 <br>
 <!--条纹表格布局 -->
 <table class="table table-striped">
   <caption>条纹表格布局</caption>
   <thead>
      <tr>
	    <th>名称</th>
		<th>城市</th>
		<th>邮编</th>
	  </tr>
   </thead>
   <tbody>
     <tr>
	   <td>Tanmay</td>
       <td>Bangalore</td>
	   <td>650001</td>
	 </tr>
	 <tr>
	   <td>Sachin</td>
       <td>Mumbai</td>
	   <td>550001</td>
	 </tr>
	 <tr>
	   <td>Uma</td>
       <td>Pune</td>
	   <td>450001</td>
	 </tr>
   </tbody>
 </table>

 <br>
 <!--条纹表格布局 -->
 <table class="table table-bordered">
   <caption>边框表格布局</caption>
   <thead>
      <tr>
	    <th>名称</th>
		<th>城市</th>
		<th>邮编</th>
	  </tr>
   </thead>
   <tbody>
     <tr>
	   <td>Tanmay</td>
       <td>Bangalore</td>
	   <td>650001</td>
	 </tr>
	 <tr>
	   <td>Sachin</td>
       <td>Mumbai</td>
	   <td>550001</td>
	 </tr>
	 <tr>
	   <td>Uma</td>
       <td>Pune</td>
	   <td>450001</td>
	 </tr>
   </tbody>
 </table>

 <br>
 <!--条纹表格布局 -->
 <table class="table table-hover">
   <caption>悬停表格布局</caption>
   <thead>
      <tr>
	    <th>名称</th>
		<th>城市</th>
		<th>邮编</th>
	  </tr>
   </thead>
   <tbody>
     <tr>
	   <td>Tanmay</td>
       <td>Bangalore</td>
	   <td>650001</td>
	 </tr>
	 <tr>
	   <td>Sachin</td>
       <td>Mumbai</td>
	   <td>550001</td>
	 </tr>
	 <tr>
	   <td>Uma</td>
       <td>Pune</td>
	   <td>450001</td>
	 </tr>
   </tbody>
 </table>

 <br>
 <!--精简表格布局 -->
 <table class="table table-condensed">
   <caption>精简表格布局</caption>
   <thead>
      <tr>
	    <th>名称</th>
		<th>城市</th>
		<th>邮编</th>
	  </tr>
   </thead>
   <tbody>
     <tr>
	   <td>Tanmay</td>
       <td>Bangalore</td>
	   <td>650001</td>
	 </tr>
	 <tr>
	   <td>Sachin</td>
       <td>Mumbai</td>
	   <td>550001</td>
	 </tr>
	 <tr>
	   <td>Uma</td>
       <td>Pune</td>
	   <td>450001</td>
	 </tr>
   </tbody>
 </table>

 <br>
 <!--悬停表格布局 -->
 <table class="table table-hover">
   <caption>悬停表格布局</caption>
   <thead>
      <tr>
	    <th>名称</th>
		<th>城市</th>
		<th>邮编</th>
	  </tr>
   </thead>
   <tbody>
     <tr>
	   <td>Tanmay</td>
       <td>Bangalore</td>
	   <td>650001</td>
	 </tr>
	 <tr>
	   <td>Sachin</td>
       <td>Mumbai</td>
	   <td>550001</td>
	 </tr>
	 <tr>
	   <td>Uma</td>
       <td>Pune</td>
	   <td>450001</td>
	 </tr>
   </tbody>
 </table>

 <br>
 <!--上下文表格布局 -->
 <table class="table">
   <caption>上下文表格布局</caption>
   <thead>
      <tr>
	    <th>产品</th>
		<th>付款日期</th>
		<th>状态</th>
	  </tr>
   </thead>
   <tbody>
     <tr class ="active">
	   <td>产品1</td>
       <td>2017-8-31</td>
	   <td>待发货</td>
	 </tr>
	 <tr class ="success">
	   <td>产品2</td>
       <td>2017-8-31</td>
	   <td>发货中</td>
	 </tr>
	 <tr class ="warning">
	   <td>产品3</td>
       <td>2017-8-31</td>
	   <td>待确认</td>
	 </tr>
	 <tr class ="danger">
	   <td>产品4</td>
       <td>2017-8-31</td>
	   <td>已退货</td>
	 </tr>
   </tbody>
 </table>

  <br>
 <!--响应式表格布局 -->
 <div class="table-responsive">
 <table class="table">
   <caption>响应式表格布局</caption>
   <thead>
      <tr>
	    <th>产品</th>
		<th>付款日期</th>
		<th>状态</th>
	  </tr>
   </thead>
   <tbody>
     <tr>
	   <td>产品1</td>
       <td>2017-8-31</td>
	   <td>待发货</td>
	 </tr>
	 <tr>
	   <td>产品2</td>
       <td>2017-8-31</td>
	   <td>发货中</td>
	 </tr>
	 <tr>
	   <td>产品3</td>
       <td>2017-8-31</td>
	   <td>待确认</td>
	 </tr>
	 <tr>
	   <td>产品4</td>
       <td>2017-8-31</td>
	   <td>已退货</td>
	 </tr>
   </tbody>
 </table>
 </div>

 <br>
 <!--综合表格布局 -->
 <table class="table table-hover table-bordered table-striped">
   <caption>综合表格布局</caption>
   <thead>
      <tr>
	    <th>产品</th>
		<th>付款日期</th>
		<th>状态</th>
	  </tr>
   </thead>
   <tbody>
     <tr>
	   <td>产品1</td>
       <td>2017-8-31</td>
	   <td>待发货</td>
	 </tr>
	 <tr>
	   <td>产品2</td>
       <td>2017-8-31</td>
	   <td>发货中</td>
	 </tr>
	 <tr>
	   <td>产品3</td>
       <td>2017-8-31</td>
	   <td>待确认</td>
	 </tr>
	 <tr>
	   <td>产品4</td>
       <td>2017-8-31</td>
	   <td>已退货</td>
	 </tr>
   </tbody>
 </table>
</body>
</html>